<template>
  <div class="min-h-screen bg-gray-50  transition-colors duration-300">
    <!-- Search and Filter Section -->
    <SearchFilterComponent 
      v-model:search-query="searchQuery"
      v-model:selected-categories="selectedCategories"
      v-model:selected-pricing="selectedPricing"
      title-line1="Discover & Deploy"
      title-line2="AI Agents"
      subtitle-highlight1="1000+ professional AI agents"
      subtitle-text="ready to automate your business. From coding to creative work, find the perfect AI teammate for any task."
      subtitle-highlight2="Start building today."
      search-placeholder="What do you want to automate?"
    />

    <!-- Agents Grid Section -->
    <AgentGridComponent 
      :agents="filteredAgents"
      title=""
      :show-view-all="false"
    />

    <!-- Empty state -->
    <div v-if="filteredAgents.length === 0" class="text-center py-12">
      <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>
      <h3 class="text-lg font-medium text-gray-900 mb-2">No agents found</h3>
      <p class="text-gray-600">Try adjusting your search or filter criteria</p>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useAgentsStore } from '../stores/agents'
  import SearchFilterComponent from '../components/common/SearchFilterComponent.vue'
  import AgentGridComponent from '../components/common/AgentGridComponent.vue'

  const agentsStore = useAgentsStore()

  // State
  const searchQuery = ref('')
  const selectedCategories = ref<string[]>([])
  const selectedPricing = ref('')

  // Computed
  const filteredAgents = computed(() => {
    let filtered = [...agentsStore.agents]

    // Filter by search query
    if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase()
      filtered = filtered.filter(agent =>
        agent.name.toLowerCase().includes(query) ||
        agent.description.toLowerCase().includes(query)
      )
    }

    // Filter by categories
    if (selectedCategories.value.length > 0) {
      filtered = filtered.filter(agent => selectedCategories.value.includes(agent.category))
    }

    // Filter by pricing
    if (selectedPricing.value) {
      filtered = filtered.filter(agent => agent.pricing.model === selectedPricing.value)
    }

    return filtered
  })

  // Lifecycle
  onMounted(() => {
    agentsStore.fetchAgents()
  })
</script>

